<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>28.CSS实现3D柱形</title>
  </head>
  <link rel="stylesheet" href="../common.css" />
  <style>
    :root {
      /* 柱形下部分颜色+柱形底部菱形 */
      --bar-bg: rgb(255, 0, 0);
      /* 柱形上部分颜色 */
      --bar-shape: rgba(255, 165, 0, 0.9);
      /* 柱形顶部部菱形 */
      --bar-top: rgb(255, 165, 0);
      /* 柱形线条颜色 */
      --bar-line: rgba(0, 0, 0, 0.1);
      /* 菱形 */
      --clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%);
      /* 柱状宽度 */
      --w: 25px;
      /* 柱状高度最大值 */
      --h: 300px;
    }
    section {
      height: var(--h);
      display: flex;
      align-items: baseline;
    }
    .bar {
      background: linear-gradient(to top, var(--bar-bg), var(--bar-shape));
      position: relative;
      width: var(--w);
      height: var(--height);
      margin-right: 20px;
    }
    .bar:last-child {
      margin-right: 0;
    }
    .bar::before,
    .bar::after {
      content: "";
      width: var(--w);
      height: calc(var(--w) / 2);
      clip-path: var(--clip-path);
      position: absolute;
      left: 0;
    }
    .bar::before {
      transform: translateY(-50%);
      background: var(--bar-top);
      top: 0;
      z-index: 2;
    }
    .bar::after {
      background: var(--bar-bg);
      transform: translateY(50%);
      bottom: 0;
      z-index: 1;
    }
    .bar-line {
      position: absolute;
      left: 50%;
      top: 0;
      width: 1px;
      height: 100%;
      background: var(--bar-line);
    }
  </style>
  <body>
    <section>
      <div class="bar" style="--height: 20%">
        <span class="bar-line"></span>
      </div>
      <div class="bar" style="--height: 30%">
        <span class="bar-line"></span>
      </div>

      <div class="bar" style="--height: 70%">
        <span class="bar-line"></span>
      </div>
      <div class="bar" style="--height: 100%">
        <span class="bar-line"></span>
      </div>
      <div class="bar" style="--height: 50%">
        <span class="bar-line"></span>
      </div>
      <div class="bar" style="--height: 60%">
        <span class="bar-line"></span>
      </div>

      <div class="bar" style="--height: 80%">
        <span class="bar-line"></span>
      </div>
      <div class="bar" style="--height: 90%">
        <span class="bar-line"></span>
      </div>
      <div class="bar" style="--height: 40%">
        <span class="bar-line"></span>
      </div>
      <div class="bar" style="--height: 10%">
        <span class="bar-line"></span>
      </div>
      <div class="bar" style="--height: 3%">
        <span class="bar-line"></span>
      </div>
    </section>
  </body>
</html>
